<template>
  <div id="abnormal">
    <a-card title="异常检查">
        <a-form-model ref="form" :model="form" :label-col="{span: 2}" :wrapper-col="{span: 5}">
          <a-form-model-item label="检查项目" class="form-col">
          <a-select placeholder="请选择" @change="changeFormValue" @popupScroll="" :allowClear="true" :show-search="true" @search="searchProject">
              <template v-for="(item,index) in projectList" v-key='index'>
                <a-select-option :value="item.value">{{item.label}}</a-select-option>
              </template>
          </a-select>
          </a-form-model-item>
          <a-form-model-item label="时间选择" class="form-col">
              <a-range-picker  @change="onChange"/>
          </a-form-model-item>
          <a-button class="jcBtn" type="primary" @click="jcClick">开始检查</a-button>
      </a-form-model>
    </a-card>
    <div class="tabs-wrap">
      <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="异常订单">
              <div class="tabPane-wrap">
                  <a-empty v-if="checkdifDifList.length==0"/>
                  <template v-if="checkdifDifList.length>0">
                    <template v-for="(item,index) in checkdifDifList" v-key="index">
                      <div class="tableWrap">
                          <div class="tableHeard dataTopWrap">
                              <div class="dataTopLeft">
                                  <div>推送编号：{{item.checkPushCode}}</div>
                                  <div>NC入库单号：{{item.orderSn}}</div>
                                  <div>检查日期：{{item.difCheckTime}}</div>
                              </div>
                              <div class="pushBtn" @click="toLink(item.checkPushId,1)">调数</div>
                          </div>
                          <div class="tablecontent">
                              <div class="tablecontentTop" style="background: #fafafa;">
                                  <div class="table-column actives">物料编码</div>
                                  <div class="table-column actives">物料名称</div>
                                  <div class="table-column actives">单位</div>
                                  <div class="table-column actives">平台验收数量</div>
                                  <div class="table-column actives">NC入库数量</div>
                                  <div class="table-column actives">差异值</div>
                              </div>
                              <template v-for="(items,indexs) in item.checkPushDetailDifs" v-key="indexs">
                                <div class="tablecontentTop">
                                  <div class="table-column">{{items.materialsNum}}</div>
                                  <div class="table-column">{{items.materialsName}}</div>
                                  <div class="table-column">{{items.unit}}</div>
                                  <div class="table-column">{{items.pushCount}}</div>
                                  <div class="table-column">{{items.ncCount}}</div>
                                  <div class="table-column">{{items.difCount}}</div>
                                </div>
                              </template>
                          </div>
                      </div>
                    </template>
                    <a-pagination v-model="currentOne" :defaultPageSize="10" :total="total" @change="changePagination" show-less-items />
                  </template>
              </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="调数记录" force-render>
              <div class="tabPane-wrap">
                <a-empty v-if="checkdifAltList.length==0"/>
                <template v-if="checkdifAltList.length>0">
                  <template v-for="(item,index) in checkdifAltList" v-key="index">
                    <div class="tableWrap">
                        <div class="tableHeard dataTopWrap">
                            <div class="dataTopLeft">
                                <div>推送编号：{{item.checkPushCode}}</div>
                                <div>NC入库单号：{{item.orderSn}}</div>
                                <div>检查日期：{{item.pushTime}}</div>
                            </div>
                            <div class="pushBtn" @click="toLink(item.checkPushId,2)">详情</div>
                        </div>
                        <div class="tablecontent">
                            <div class="tablecontentTop" style="background: #fafafa;">
                                <div class="table-column actives">物料编码</div>
                                <div class="table-column actives">物料名称</div>
                                <div class="table-column actives">单位</div>
                                <div class="table-column actives">平台验收数量</div>
                                <div class="table-column actives">NC入库数量</div>
                                <div class="table-column actives">差异值</div>
                                <div class="table-column actives">调数验收</div>

                            </div>
                            <template v-for="(items,indexs) in item.checkDifRecords" v-key="indexs">
                                <div class="tablecontentTop">
                                  <div class="table-column">{{items.materialsNum}}</div>
                                  <div class="table-column">{{items.materialsName}}</div>
                                  <div class="table-column">{{items.unit}}</div>
                                  <div class="table-column">{{items.checkNum}}</div>
                                  <div class="table-column">{{items.pushNum}}</div>
                                  <div class="table-column">{{items.difNum}}</div>
                                  <div class="table-column">{{items.altNum}}</div>
                              </div>
                            </template>
                        </div>
                    </div>
                  </template>
                  <a-pagination v-model="currentTwo" :defaultPageSize="10" :total="total2" @change="changePagination2" show-less-items />
                </template>
              </div>
          </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';

@Component
export default class abnormal extends Vue {
  form: any = {};
  projectList:any[]=[]
  projectId:any = '' // 项目id
  startDate:any = '' // 开始时间
  endDate:any = '' // 结束时间
  checkdifDifList:any[] = [] // 异常订单列表
  checkdifAltList:any[] = [] // 调数记录
  currentOne:any = 1;
  currentTwo:any = 1
  total:any=''
  total2:any = ''
  shearchVal:any = ''
  tt:any = null
  currentPage:any = 1
  callback (key:any) {
      console.log(key);
  }
  init () {
    this.getProjectList()
  }
  // 选择项目
  changeFormValue (val:any) {
    this.projectId = val
  }
  searchProject (val:any) {
    this.shearchVal = val
    clearTimeout(this.tt)
    this.tt = setTimeout(() => {
      this.currentPage = 1
      this.projectList = []
      this.getProjectList()
    }, 500);
  }
  // 选择时间
  onChange (val:any) {
    this.startDate = this.$util.formatDate(val)[0]
    this.endDate = this.$util.formatDate(val)[1]
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.currentPage++
        this.getProjectList()
      }
  }
  // 清除选择框
  clearData (val:any) {
    console.log(111)
  }
  // 点击检查按钮
  jcClick () {
    if (this.projectId == '') {
      this.$message.error('请选择项目')
      return
    } else if (this.startDate == '') {
      this.$message.error('请选择检查时间')
      return
    }
    this.getCheckdifDifListFetch()
    this.getCheckdifAltListFetch()
  }
  // 分页
  changePagination (val:any) {
    this.currentOne = val
    this.getCheckdifDifListFetch()
  }
  changePagination2 (val:any) {
    this.currentTwo = val
    this.getCheckdifAltListFetch()
  }
  // 获取异常订单
  getCheckdifDifListFetch () {
    let data = {
      page: this.currentOne,
      size: 10,
      projectId: this.projectId.split('-')[0],
      startDate: this.$util.sliceDate(this.startDate),
      endDate: this.$util.sliceDate(this.endDate)
    }
    this.$api.checkdifDifListFetch(data).then((res:any) => {
      this.checkdifDifList = res.data.records
      this.total = res.data.total;
    }).catch((err:any) => {
      this.checkdifDifList = []
    })
  }
  // 获取调数记录
  getCheckdifAltListFetch () {
    let data = {
      page: this.currentTwo,
      size: 10,
      projectId: this.projectId.split('-')[0],
      startDate: this.$util.sliceDate(this.startDate),
      endDate: this.$util.sliceDate(this.endDate)
    }
    this.$api.checkdifAltListFetch(data).then((res:any) => {
      this.checkdifAltList = res.data.records
      this.total2 = res.data.total;
    }).catch(() => {
      this.checkdifAltList = []
    })
  }
  // 获取项目管理列表
  getProjectList () {
    let data = {
      page: this.currentPage,
      size: 100,
      searchValue: this.shearchVal
    }
    this.$api.projectRoleProjectListFetch(data).then((res: any) => {
      let projectList = this.projectList.concat(res.data.records.map((item: any) => ({
        label: item.ncProjectName,
        value: item.ncProjectId + '-' + item.ncProjectName
      })))
      this.projectList = projectList
    })
  }
  // 跳转页面
  toLink (id:any, type:any) {
    this.$router.push({
      path: `/acceptance/abnormal/abnormalDetails?id=${id}&type=${type}`
    })
  }
}
</script>
<style lang='scss' scoped>
#abnormal{
    padding: 0 30px;
    .jcBtn{
        margin-left: 130px;
    }
    .tabs-wrap{
        background: #fff;
        min-height: 480px;
        margin-top: 34px;
    }
    .tabPane-wrap{
        padding: 15px 20px;
    }
    .tableWrap{
  width: 100%;
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;
}
.tableHeard{
  height: 58px;
  padding: 0 16px;
}
.tablecontentTop{
  display: flex;
  height: 46px;
  align-items: center;
  border-top: 1px solid #e8e8e8;
  div{
    border-right:1px solid #e8e8e8;
  }
  div:nth-child(7){
    border-right:none;
  }
  .actives{
    font-weight: bold;
  }
  .table-column{
    flex: 1;
    height: 100%;
    line-height: 46px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
.select-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width:88px;
  height:46px;
  img{
    width:22px;
    height:22px;
  }
  :hover{
    cursor: pointer;
  }
}

.dataTopWrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dataTopLeft{
    display: flex;
    div{
        margin-right: 50px;
    }
}
.pushBtn{
  background: rgb(53, 125, 219);
  color: #fff;
  padding: 5px 16px;
  border-radius: 6px;
}
.pushBtn:hover{
  cursor: pointer;
}
}
</style>
